import QtQuick 1.0

Rectangle{
    id: _root
//    anchors.leftMargin: 3 * density
//    anchors.rightMargin: 3 * density
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    height: _lineList.count <= 1 ? 0 : 30 * density
//    color: "#666666"
    opacity: 0.3
    radius: 0// 5 * density

    gradient: Gradient {
        GradientStop {id: _gradBg1;  position: 0.0;  color: "#666666"}
        GradientStop {id: _gradBg2;  position: 0.5;  color: "#666666"}
        GradientStop {id: _gradBg3;  position: 1.0;  color: "#333333"}
    }

    property real density: 1.0

    property int index: -1
    property int count: 0

    property color colorTab: "#ffffff"

    property color fontColor: "#000000"
    property int fontStyle: Text.Raised
    property color fontStyleColor: "#ffffff"
    property int fontPixelSize: 12

    signal tabClicked(int index)

    // タブのデータを設定する
    function setLineTab(tab_name){
        _model.clear();
        for(var i=0; i<tab_name.length; i++){
            _model.append({ "_text": tab_name[i]});
        }
    }

    function append(name){
        _model.append({"_text": name});
    }

    function clear(){
        _model.clear();
    }

    // インデックスの変化を受ける
    onIndexChanged: {
        if(index < 0){
        }else{
            _lineList.currentIndex = index;
        }
    }


    Rectangle {
        height: parent.height / 2
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.margins: 1
        radius: parent.radius
        gradient: Gradient {
            GradientStop {id:_grad1;  position: 0.0;  color: "#66999999";}
            GradientStop {id:_grad2;  position: 1.0;  color: "#11999999";}
        }
        smooth: true
    }

    ListModel{
        id: _model
        ListElement{
            _text: "main"
        }
    }
    Component{
        id: _delegate
        Rectangle {
            id: _tabItem
            width: _root.width / (_lineList.count === 0 ? 1 : _lineList.count)
            height: _root.height
            clip: true
            smooth: true
            color: "#0000dd00"
            border.color: "#222222"
            border.width: 1
            Text{
                anchors.centerIn: parent
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                text: _text
                font.bold: true
                color: _root.fontColor
                style: _root.fontStyle
                styleColor: _root.fontStyleColor
                font.pixelSize: _root.fontPixelSize * _root.density
            }
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    mouse.accepted = false;
                    tabClicked(index);
                }
            }
        }
    }
    ListView{
        id: _lineList
        anchors.fill: parent
        orientation: ListView.Horizontal
        model: _model
        delegate: _delegate
        interactive: false
        highlight: _highlightBar
        highlightFollowsCurrentItem: true
        highlightMoveDuration: 200
    }
    Component {
        id: _highlightBar
        Rectangle {
            width: (_lineList.currentItem === null) ? 0 : _lineList.currentItem.width
            height: (_lineList.currentItem === null) ? 0 : _lineList.currentItem.height
//            color: "#ff6666"
            radius: _root.radius
//            x: (_lineList.currentItem === null) ? 0 : _lineList.currentItem.x;
//            y: (_lineList.currentItem === null) ? 0 : _lineList.currentItem.y;
//            Behavior on x { SmoothedAnimation { duration: 200 } }
            //2582e1
            //0320ff
            //000000
            //135393
            gradient: Gradient {
                GradientStop {id: _gradBg1;  position: 0.0;  color: "#0320bb"}
                GradientStop {id: _gradBg2;  position: 0.5;  color: "#0320bb"}
                GradientStop {id: _gradBg3;  position: 1.0;  color: "#131393"}
            }
            Rectangle {
                height: parent.height / 2
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.margins: 1
                radius: parent.radius
                gradient: Gradient {
                    GradientStop {id:_grad1;  position: 0.0;  color: "#44999999";}
                    GradientStop {id:_grad2;  position: 1.0;  color: "#11999999";}
                }
                smooth: true
            }
        }
    }
}
